<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>
  <body>
    <div id="app">
      在vue中不管是设置class类样式 还是style行内样式
      对象中属性永远是样式的属性，值可以写死 也可以从data中获取
      数组中的值可以写死 也可是对象 对象也可以从data获取

      <!--对象就是无序键值对的集合-->
      <!--<h1 :style="styleObj1" v-text="msg"></h1>-->
      <!-- 如果属性里面带有-必须加上引号 -->
      <h1 :style="{color: 'red', 'font-weight': 200}"></h1>

      <h1 :style="[styleObj1, styleObj2]" v-text="msg"></h1>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "这是一个h1",
          styleObj1: { color: "red", "font-weight": 200 },
          styleObj2: { "font-style": "italic" }
        },
        methods: {}
      });
    </script>
  </body>
</html>
